<template>
  <umrp-layout class="login-page">
    <umrp-layout-sider class="login-aside">
      <div class="aside-content">
        <h1>家承兰台</h1>
        <p>公司slogan</p>
      </div>
    </umrp-layout-sider>
    <umrp-layout-content class="login-main">
      <div class="main-content">
        <h1>登录</h1>
        <form class="login-form">
          <umrp-form-item label="用户名">
            <umrp-input placeholder="请输入用户名"></umrp-input>
          </umrp-form-item>
          <umrp-form-item label="密码">
            <umrp-input type="password" placeholder="请输入密码"></umrp-input>
          </umrp-form-item>
          <umrp-button type="primary" native-type="submit" v-link:Dashboard>登录</umrp-button>
        </form>
      </div>
    </umrp-layout-content>
  </umrp-layout>
</template>

<style lang="scss" scoped>
  .login-page {
    height: 100vh;
  }

  .login-aside {
    width: 50%;
    background-color: #f5f5f5;
    /* 左侧背景颜色 */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .aside-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: center;
    padding: 20px;
  }

  .login-main {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    /* 右侧背景颜色 */
  }

  .main-content {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 50%;
    padding: 20px;
  }

  .login-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
</style>
